<template>
  <div>
    <canvas ref="pdfCanvas"></canvas>
  </div>
</template>

<script>
export default {
  name: 'PdfVue',
  props: {
    pdfSrc: { type: String, required: true }, // 支持 url 或 base64
    isBase64: { type: Boolean, default: false }
  },
  watch: {
    // 监视 pdfSrc 的变化，以便在父组件中更改 pdf 时重新渲染
    pdfSrc() {
      this.initialize();
    }
  },
  mounted() {
    this.initialize();
  },
  methods: {
    async initialize() {
      try {
        console.log('正在加载 PDF.js 模块...');
        // 从 public 目录动态导入 pdf.mjs 模块
        // 使用 webpackIgnore: true 告诉 webpack 不要尝试在构建时解析此路径。
        // 这是一个运行时URL，将由浏览器直接从 public 目录获取。
        const pdfjsLib = await import(/* webpackIgnore: true */ '/pdfjs/build/pdf.mjs');
        console.log('PDF.js 模块加载成功。');

        // 设置 worker 的路径，指向 public 目录下的 worker 文件
        // 这是必需的，以便在后台线程中解析 PDF
        pdfjsLib.GlobalWorkerOptions.workerSrc = '/pdfjs/build/pdf.worker.mjs';

        // 调用渲染方法
        await this.renderPDF(pdfjsLib);

      } catch (error) {
        console.error('初始化 PDF.js 或渲染 PDF 时失败:', error);
      }
    },
    async renderPDF(pdfjsLib) {
      if (!this.pdfSrc) {
        console.log('没有提供 PDF 路径，跳过渲染。');
        return;
      }

      try {
        console.log(`开始渲染 PDF: ${this.pdfSrc.substring(0, 50)}...`);
        let loadingTask;

        if (this.isBase64) {
          let base64 = this.pdfSrc;
          // 移除数据URL前缀
          if (base64.startsWith('data:')) {
            base64 = base64.split(',')[1];
          }
          // atob 需要 base64 字符串的长度是 4 的倍数
          while (base64.length % 4 !== 0) {
            base64 += '=';
          }
          const pdfData = atob(base64);
          const uint8Array = new Uint8Array(pdfData.length);
          for (let i = 0; i < pdfData.length; i++) {
            uint8Array[i] = pdfData.charCodeAt(i);
          }
          loadingTask = pdfjsLib.getDocument({ data: uint8Array });
        } else {
          loadingTask = pdfjsLib.getDocument(this.pdfSrc);
        }

        const pdf = await loadingTask.promise;
        const page = await pdf.getPage(1); // 仅渲染第一页
        const viewport = page.getViewport({ scale: 1.5 });

        const canvas = this.$refs.pdfCanvas;
        const context = canvas.getContext('2d');
        canvas.height = viewport.height;
        canvas.width = viewport.width;

        await page.render({ canvasContext: context, viewport }).promise;
        console.log('PDF 渲染成功。');

      } catch (error) {
        console.error('PDF 渲染过程中出错:', error);
      }
    }
  }
};
</script>

<style scoped>
canvas {
  border: 1px solid #ddd;
  max-width: 100%;
  height: auto;
  display: block;
}
</style>